
<div>
	<p>For a complex page, you may divide it into several views within
		a tab panel like this</p>
</div>
<div id="tabPanel">
	<ul class="nav nav-tabs">
		<li class="active"><a href="#tab1" data-toggle="tab">Activity1</a></li>
		<li><a href="#tab2" data-toggle="tab">Activity2</a></li>
		<li><a href="#tabMore" data-toggle="tab">More...</a></li>
	</ul>
	<div id="myTabContent" class="tab-content">
		<div class="tab-pane fade in active" id="tab1">
			<p>Activity Content1</p>
		</div>
		<div class="tab-pane fade" id="tab2">
			<p>Activity Content2</p>
		</div>
		<div class="tab-pane fade" id="tabMore">
			<p>More...</p>
		</div>
	</div>
</div>
<ul>
	<li>
		<h2>ForwardableActivity</h2>
		<p>
			Use
			<code>ForwardableActivity</code>
			to make your views aware of
			<code>ActivityManager</code>. This allows the view to manipulate other activities via activity manager.
			May just to set the active index or do a update to other views. 
		</p>
	</li>
	<li><h2>Lazy Initialization</h2>
		<p>The TabPanel above shows one widget at one time, but it has to
			instantiate all elements right here. With <code>ActivitiyManager</code> you can doing
			a lazy initialization(only create views when in need).</p></li>
	<li><h2>Examples</h2>
				<ul>
				<li>See <a
					href='#/UserManage'>UserManage</a></li>
				<li>See <a
					href='#/ShoppingCart'>ShoppingCart</a></li>
			</ul>
	</li>

</ul>
